<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>账户明细</span>
      </div>
    </div>
    <div class="orderSeatch mar_t20">
      <el-form :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
        <el-form-item label="选择店铺：">
          <el-select v-model="formInline.region" placeholder="请选择" @change="selectType">
            <el-option v-for="item in options" :key="item.id" :label="item.name+'(ID:'+item.id+')'"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <template>
          <el-form-item label="订单状态：">
            <el-radio-group v-model="formInline.type" @change="selectType">
              <el-radio-button label="0">所有订单</el-radio-button>
              <el-radio-button label="1">已完成</el-radio-button>
              <el-radio-button label="2">已取消</el-radio-button>
              <el-radio-button label="3">进行中</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </template>
        <el-form-item label="订单类型：" class="mar_t20">
          <el-radio-group v-model="formInline.orderType" @change="selectType">
            <el-radio-button label="0">不限</el-radio-button>
            <el-radio-button label="2">外卖</el-radio-button>
            <el-radio-button label="3">当面付</el-radio-button>
            <el-radio-button label="1">堂食</el-radio-button>
            <el-radio-button label="4">快餐</el-radio-button>
            <el-radio-button label="5">其他</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="订单来源：" class="mar_t20">
          <el-radio-group v-model="formInline.platform" @change="selectType">
            <el-radio-button label="0">不限</el-radio-button>
            <el-radio-button label="1">微信小程序</el-radio-button>
            <el-radio-button label="2">支付宝小程序</el-radio-button>
            <el-radio-button label="3">收银台</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付方式：" class="mar_t20">
          <div class="flex-bet">
            <el-radio-group v-model="formInline.payMode" @change="selectType">
              <el-radio-button label="0">不限</el-radio-button>
              <el-radio-button label="1">微信支付</el-radio-button>
              <el-radio-button label="2">支付宝支付</el-radio-button>
              <el-radio-button label="3">余额支付</el-radio-button>
              <el-radio-button label="4">现金支付</el-radio-button>
              <el-radio-button label="5">线下支付</el-radio-button>
            </el-radio-group>
            <span class="mar_l20">
              <a :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">交易导出</el-button></a>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="查询日期：" class="mar_t20">
          <div class="flex-bet">
            <div class="flex-center">
              <el-radio-group v-model="formInline.timeType" @change="selectType">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">今天</el-radio-button>
                <el-radio-button label="2">近七天</el-radio-button>
                <el-radio-button label="3">近十五天</el-radio-button>
                <el-radio-button label="4">具体日期</el-radio-button>
              </el-radio-group>
              <span class="mar_l20" v-if="formInline.timeType=='4'">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" @change="selectType"></el-date-picker>
              </span>
            </div>
          </div>
        </el-form-item>
<!--        <el-form-item label="记录导出：" class="mar_t20">-->
<!--          <el-button type="primary">导出</el-button>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <div class="mar_t20 tablecenter">
      <el-table
          :data="list"
          stripe
          style="width: 100%">
        <el-table-column
            prop="takeNo"
            label="订单序号"
            width="90"
        >
          <template slot-scope="scope">
            <div class="flex wei flex-center">
                #{{scope.row.takeNo}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="outTradeNo"
                label="订单编号"
        >
        </el-table-column>
        <el-table-column
            prop="createdAt"
            label="下单时间"
        >
        </el-table-column>
        <el-table-column
            prop="state"
            label="订单类型"
        >
          <template slot-scope="scope">
            <div class="flex flex-center">
              <div v-if="scope.row.origin=='1'"><el-tag type="success" size="mini">外卖</el-tag></div>
<!--              <div v-if="scope.row.origin=='2'"><el-tag type="success" size="mini">充值</el-tag></div>-->
<!--              <div v-if="scope.row.origin=='3'">积分商城</div>-->
              <div v-if="scope.row.origin=='4'"><el-tag type="info" size="mini">其他</el-tag></div>
              <div v-if="scope.row.origin=='5'"><el-tag size="mini">当面付</el-tag></div>
              <div v-if="scope.row.origin=='6'"><el-tag type="danger" size="mini">快餐</el-tag></div>
              <div v-if="scope.row.origin=='7'"><el-tag type="warning" size="mini">堂食</el-tag></div>
<!--              <div v-if="scope.row.origin=='8'">付费会员卡</div>-->
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="money"-->
<!--            label="订单总金额"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <div class="flex wei flex-center">-->
<!--              ￥{{scope.row.money}}-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            prop="money"
            label="用户实付"
        >
          <template slot-scope="scope">
            <div class="flex wei color-green flex-center">
              +￥{{scope.row.money}}
            </div>
            <div class="fon_12">
            <span>{{scope.row.payModeName}}</span>
          </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="subsidy"
            label="补贴（平台）"
        >
          <template slot-scope="scope">
            <div class="flex color-green flex-center">
              +￥{{scope.row.subsidy}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="serviceMoney"
            label="平台服务费"
        >
          <template slot-scope="scope">
            <div class="flex color-red flex-center" v-if="!scope.row.refundAt">
              -￥{{scope.row.serviceMoney}}
            </div>
            <div class="flex color-red flex-center" v-else>0.00</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="storeActualMoney"
            label="实际到账"
        >
          <template slot-scope="scope">
            <div class="flex wei color-green flex-center" v-if="!scope.row.refundAt">
              ￥{{scope.row.storeActualMoney}}
            </div>
            <div class="flex wei color-green flex-center" v-else>0.00</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="settlement"
            label="订单状态"
        >
          <template slot-scope="scope">
            <div class="flex flex-center">
              <div class="color-green" v-if="scope.row.state=='1'"><el-tag type="success" size="mini">已完成</el-tag></div>
              <div class="color_9" v-if="scope.row.state=='2'"><el-tag type="dager" size="mini">已取消</el-tag></div>
              <div class="color-red" v-if="scope.row.state=='3'"><el-tag size="mini">进行中</el-tag></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="zc"
            label="操作"
        >
          <template slot-scope="scope">
            <div class="flex flex-center">
              <el-button type="text" @click="handelDetail(scope.row.outTradeNo,scope.row.origin)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="cc"-->
<!--            label="操作"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <div class="flex">-->
<!--              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>-->
<!--&lt;!&ndash;              <el-button type="text"><a :href="handelExport(scope.row)">导出外卖</a></el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button type="text"><a :href="handelExport2(scope.row)">导出其他</a></el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-button type="text" @click="handelPrinting(scope.row)">打印日结单</el-button>&ndash;&gt;-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.size"
          :current-page.sync='page.currentPage'
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <edit ref="edit"></edit>
  </div>
</template>
<script>
  import {changeDate} from "@/utils";
  import {transaction} from "@/api/statistics";
  import {mapState} from "vuex";
  import index from "@/api";
  import Edit from "./components/seeDetail";

  export default {
    components: {Edit},
    mounted() {
      this.bus.$emit('loading', true);
      this.init();
    },
    created() {
      this.formInline.region = this.market[0].id
      this.options = this.market
    },
    computed:{
      ...mapState(['market'])
    },
    data () {
      return {
        formInline: {
          time: [new Date(), new Date()],
          timeType: '1',
          type: '0',
          platform: '0',
          payMode: '0',
          orderType: '0',
          region:'',
        },
        list: [],
        listLoading: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        page: {
          total: 0,
          size: 20,
          currentPage: 1
        },
        options: [{
          value: '1',
          label: '全部'
        }],
        tableData: [
          {
            sj:'2021-04-27 11:16',
            ddh:'20158296255554655',
            lx:'1',
            srzc:'1',
            zhye:'15.00',
          },
          {
            sj:'2021-04-27 11:16',
            ddh:'20158296255554655',
            lx:'2',
            srzc:'2',
            zhye:'25.00',
          },
        ],
      }
    },
    methods: {
      async init() {
        var params = {
          page: this.page.currentPage,
          timeType: this.formInline.timeType,
          startTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[0]) : '',
          endTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[1]) : '',
          // state: this.formInline.state,
          type: this.formInline.type,
          orderType: this.formInline.orderType,
          platform: this.formInline.platform,
          payMode: this.formInline.payMode,
          storeId:this.formInline.region,
        };
        const {data, count} = await transaction(params);
        this.list = data;
        this.page.total = count;
        this.bus.$emit('loading', false);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        this.init();
      },
      async handelDetail(outTradeNo,origin) {
        let type=''
        if(origin=='1'){
          type='1'
        }else if(origin=='4'){
          type='5'
        }else if(origin=='5'){
          type='4'
        }else if(origin=='6'){
          type='3'
        }else if(origin=='7'){
          type='2'
        }
        if (outTradeNo && type) {
          this.$refs["edit"].showEdit(outTradeNo,type);
        }
      },
      selectType() {
        this.init();
      },
      handelExport() {
        let startTime = this.formInline.time ? changeDate(this.formInline.time[0]).substring(0, 10) : '';
        let endTime = this.formInline.time ? changeDate(this.formInline.time[1]).substring(0, 10) : '';
        let backendPath = index.backendPath;
        return backendPath + 'channel/store-bill/transaction?export=1' + '&page=' + this.page.currentPage + '&type'+this.formInline.type + '&orderType=' + this.formInline.orderType + '&timeType=' + this.formInline.timeType + '&platform=' + this.formInline.platform + '&storeId=' + this.formInline.region + '&payMode=' + this.formInline.payMode + '&startTime=' + startTime + '&endTime=' + endTime;
      },
    },
  }
</script>
